<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>33-jQuery移入移出事件</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .father{
            width:200px;
            height:200px;
            background-color:blue;
        }
        .father .son{
            width:100px;
            height:100px;
            background-color:red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <script src="./js/jquery-1.12.4.js"></script>
    <script>
      $(function(){
        //鼠标移入事件
        // $(".father").mouseover(function(){
        //     console.log('father被移入了')
        // })
        //鼠标移出事件
        // $('.father').mouseout(function(){
        //     console.log("father被移除了")
        // })
        //以上两种事件会影响到当前元素的父元素的移入移出事件
        // 鼠标移入事件
        // $(".father").mouseenter(function(){
        //     console.log('father被移入了')
        // })
        // 鼠标移出事件
        // $('.father').mouseleave(function(){
        //     console.log("father被移除了")
        // })
        // 鼠标移入事件
        $(".father").hover(function(){
            console.log('father被移入了')
        },function(){
            console.log("father被移出了")
        })
      })
    </script>
</body>
</html>